<style lang="scss" scoped>
.canvas {
  display: flex;
  width: 100%;
  height: 200px;
  .canvas-left {
    width: 70%;
    height: 100%;
    p {
      font-size: 20px;
      text-align: center;
    }
    .canvas-left-top {
      float: left;
      span {
        font-size: 110px;
        color: blue;
        font-weight: bold;
      }
    }
    .canvas-left-top-bottom {
      font-size: 25px;
      float: right;
      margin-top: 20px;
      margin-left: 10px;
    }
  }
  .canvas-right {
    width: 30%;
    height: 100%;
    img {
      width: 100%;
      height: 200px;
    }
  }
}
.dh {
  display: flex;
  margin: 20px;
  background: #f6f7f7;
  .dh-left {
    width: 70%;
  }
  .dh-right {
    width: 30%;
    h2 {
      color: red;
      font-size: 20px;
    }
    button {
      background: #3f86ff;
      color: white;
      border: 0;
    }
  }
}
.zhengzhuang{
  img{
    width: 100%;
    height: 250px;
  }
}
</style>
<template>
  <div>
    <van-nav-bar title="快速问诊" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <div>
      <img src="https://kano.guahao.com/ZFy325083470?webp=80" width="100" height="30" alt="" />
    </div>
    <div class="canvas">
      <div class="canvas-left">
        <div class="canvas-left-top">
          <span>3</span>
          <div class="canvas-left-top-bottom">
            <h2>分钟找到</h2>
            <h2>三甲医生</h2>
          </div>
          <div>
            <p>当前在线接诊医生人数</p>
            <p>01036</p>
          </div>
        </div>
      </div>
      <div class="canvas-right">
        <van-swipe :autoplay="1000" :indicator-color="'white'">
          <van-swipe-item v-for="image in images" :key="image">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div>
      <div class="dh">
        <div class="dh-left">
          <h4>推荐</h4>
          <h2>
            电话问诊<span
              style="font-weight: normal; font-size: 14px; border: 1px solid red; color: red"
              >三甲</span
            >
          </h2>
          <span>一对一电话沟通,好评率99%</span>
        </div>
        <div class="dh-right">
          <div>
            <h2>￥29</h2>
            <button>立即咨询</button>
          </div>
        </div>
      </div>

      <div class="dh">
        <div class="dh-left">
          <h2>
            图文问诊<span
              style="font-weight: normal; font-size: 14px; border: 1px solid red; color: red"
              >三甲</span
            >
          </h2>
          <span>图片、文字、语言不限次咨询</span>
        </div>
        <div class="dh-right">
          <div>
            <h2>￥19</h2>
            <button>立即咨询</button>
          </div>
        </div>
      </div>
      <div class="dh">
        <div class="dh-left">
          <h2>名院专家 实时问诊</h2>
          <span>评价接诊时长20分钟</span>
        </div>
        <div class="dh-right">
          <div>
            <button style="margin-top: 20px">立即咨询</button>
          </div>
        </div>
      </div>
    </div>
    <div class="zhengzhuang">
      <img src="https://kano.guahao.com/Rqe414789261?webp=80" alt="">
      <img src="https://kano.guahao.com/aIq414788299?webp=80" alt="">
      <img src="https://kano.guahao.com/qUn414789250?webp=80" alt="">
      <img src="https://kano.guahao.com/x8h414789284?webp=80" alt="">
      <img src="https://kano.guahao.com/ztM415251993?webp=80" alt="">
      <img src="https://kano.guahao.com/SJh415251985?webp=80" alt="">
      <img src="https://kano.guahao.com/0VG414788295?webp=80" alt="">
      <img src="https://kano.guahao.com/UgV414789260?webp=80" alt="">
      <img src="https://kano.guahao.com/grm414789263?webp=80" alt="">
    </div>
  </div>
</template>
<script lang="ts" setup>
const images = [
  'https://kano.guahao.cn//J5j41175675.jpg?timestamp=1576574510030&resize=332:x&webp=80',
  'https://kano.guahao.cn//RwF553836373.png?timestamp=1631524396284&resize=332:x&webp=80',
  'https://kano.guahao.cn//LSN186734311.jpg?timestamp=1611192835211&resize=332:x&webp=80',
  'https://kano.guahao.cn//6Ju755216447.jpg?timestamp=1670827355324&resize=332:x&webp=80'
]
</script>